<template>
  <el-container style="position: relative">
    <SiteTree style="position: fixed" @on-choose-region="filetrStation" />
    <el-main class="SubItemAnalysisContent">
      <el-card class="lg-mb-20">
        <div
          class="default-main"
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <!-- 时间选择 -->
          <div style="margin-left: 2%">
            <el-date-picker
              style="width: 150px"
              v-model="yoyStore.date"
              type="year"
              :disabled-date="pickerOptions"
              placeholder="选择日期"
              @change="dateChange"
              format="YYYY"
              value-format="YYYY"
            />
          </div>
          <div class="btn" style="margin-left: 2%">
            <el-button @click="prev">上一年</el-button>
            <el-button @click="next" :disabled="state.disabled">
              下一年
            </el-button>
          </div>
        </div>
        <YOY ref="YOYRef" v-if="state.show" />
        <div v-else>请选择左侧电表</div>
      </el-card>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import {
  reactive,
  onMounted,
  provide,
  ref,
  onBeforeUnmount,
  computed,
} from "vue";
import SiteTree from "./components/aside.vue";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useAssetSite } from "@/store/backend/Assets/site";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import { timeFormat } from "@/utils/common"; // 导入表格api方法生成器
import { useAssetCabinet } from "@/store/backend/Assets/cabinet";
import { useElectricData } from "@/store/backend/DataM/RealTime";
import { useElectricSubitemByDay } from "@/store/backend/DataM/SubitemByDay";
import YOY from "./components/yoy.vue";
import { useAssetElectric } from "@/store/backend/Assets/electric";
import { useElectricYearAnalysis } from "@/store/backend/DataM/YearAnalysis";

const dictionary = useDictionary();
const config = useConfig();
const site = useAssetSite();
const itemObject = useWarningItemObject();
const cabinet = useAssetCabinet();
const realTime = useElectricData();
const analysis = useElectricSubitemByDay();
const electric = useAssetElectric();
const yoyStore = useElectricYearAnalysis();
const YOYRef = ref();

const radio1 = ref("数据");

const state: {
  show: boolean;
  isOpen: boolean;
  disabled: boolean;
  stateTime: any;
  searchForm: any;
  lastData: any[];
} = reactive({
  show: false,
  isOpen: false,
  disabled: true,
  stateTime: "",
  lastData: [],
  searchForm: {
    ecode: "", //电表号
    siteids: [],
    start: 0,
    end: 23,
    date: "",
  },
});

//限制用户选择日期
const pickerOptions = (time: Date) => {
  // return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000;
  return time.getTime() > Date.now();
};

//获取该电表的同比数据
const getYoYData = (filter: any) => {
  yoyStore
    .getList(filter)
    .then((res: any) => {
      state.show = true;
      state.lastData = res.rows;
    })
    .catch((err: any) => {
      console.log("查询实时数据失败", err);
    });
};

//刷新数据
const refreshData = () => {
  if (state.isOpen && state.show) {
    state.show = false;
    setTimeout(() => {
      state.show = true;
    }, 500);
  } else {
    state.show = true;
    state.isOpen = true;
  }
};
//接收站点树传递过来的数据
const filetrStation = (row: any, node: any) => {
  console.log("接收站点树传递过来的数据", row, node);
  if (node) {
    yoyStore.ecode = node.ecode; //待查电表号
  }
  refreshData();
};

//年份选择
const dateChange = (val: any) => {
  state.stateTime = val
    ? val + "-" + timeFormat("", "mm-dd")
    : timeFormat("", "yyyy-mm-dd");
  yoyStore.date = state.stateTime;
  refreshData();
  isDisabled();
};

//上一年
const prev = () => {
  let params = state.stateTime.split("-");
  state.stateTime = Number(params[0]) - 1 + "-" + timeFormat("", "mm-dd");
  yoyStore.date = state.stateTime;
  refreshData();
  isDisabled();
};
//下一年
const next = () => {
  let params = state.stateTime.split("-");
  state.stateTime = Number(params[0]) + 1 + "-" + timeFormat("", "mm-dd");
  yoyStore.date = state.stateTime;
  refreshData();
  isDisabled();
};

//判断明天按钮是否可以点击
const isDisabled = () => {
  let params = state.stateTime.split("-");
  let currentYear = timeFormat("", "yyyy");

  if (Number(params[0]) >= Number(currentYear)) {
    state.disabled = true;
  } else {
    state.disabled = false;
  }
};
// 获取当前时间;
const getTime = () => {
  state.stateTime = timeFormat("", "yyyy-mm-dd");
  yoyStore.date = state.stateTime;
};
getTime();

const menuWidth = computed(() => config.overviewMenuWidth());

onMounted(() => {});

provide("site", site);
provide("config", config);
provide("dictionary", dictionary);
provide("realTime", realTime);
provide("itemObject", itemObject);
provide("cabinet", cabinet);
provide("analysis", analysis);
provide("electric", electric);
provide("yoyStore", yoyStore);

onBeforeUnmount(() => {
  yoyStore.date = "";
  yoyStore.ecode = "";
});
</script>
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 20px var(--ba-main-space);
}
.SubItemAnalysisContent {
  margin-left: v-bind(menuWidth);
}
</style>
